<style scoped>

</style>
<!--        <el-dialog
          title="订单详情"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <el-form ref="form" :model="order" label-width="80px">
            <span style="font-size: larger; font-weight: bold;">课程标题</span>&nbsp;&nbsp; {{ order.courseTitle }}<br>
            <span style="font-size: larger; font-weight: bold;">课程内容:</span>&nbsp;&nbsp; {{ order.courseCover }}<br>
            <span style="font-size: larger; font-weight: bold;">讲师名称:</span>&nbsp;&nbsp; {{ order.teacherName }}<br>
            <span style="font-size: larger; font-weight: bold;">购买人昵称:</span>&nbsp;&nbsp; {{ order.nickname }}<br>
            <span style="font-size: larger; font-weight: bold;">购买人手机:</span>&nbsp;&nbsp; {{ order.mobile }}<br>
            <span style="font-size: larger; font-weight: bold;">购买金额:</span>&nbsp;&nbsp; {{ order.totalFee }}<br>
            <span style="font-size: larger; font-weight: bold;">支付方式:</span>&nbsp;&nbsp;
            {{ order.status === 1 ? '微信' : '支付宝' }}<br>
            <span style="font-size: larger; font-weight: bold;">购买人昵称:</span>&nbsp;&nbsp; {{ order.nickname }}<br>
            <span style="font-size: larger; font-weight: bold;">购买时间:</span>&nbsp;&nbsp; {{ order.payTime }}<br>
            <span style="font-size: larger; font-weight: bold;">订单状态:</span>&nbsp;&nbsp;
            {{ order.payType === 1 ? '已支付' : '未支付' }}

          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>-->
<template>
  <div>
    <el-row>
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-row class="tac">
            <el-col :span="12">
              <side-menu></side-menu>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="16">
        <el-form :inline="true" :model="commentDto" class="demo-form-inline">
          <el-form-item label="评论内容" :inline-message="true">
            <el-input v-model="commentDto.content" placeholder="评论内容"></el-input>
          </el-form-item>
          <el-form-item label="课程标题" :inline-message="true">
            <el-input v-model="commentDto.title" placeholder="课程标题"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="commentDto.orderBy" placeholder="评论时间顺序" @change="getCommentList">
              <el-option label="最新评论" value="desc"></el-option>
              <el-option label="最早评论" value="asc"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getCommentList">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="commentList"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
          >
          </el-table-column>
          <el-table-column
            prop="title"
            label="课程标题"
          >
          </el-table-column>
          <el-table-column
            prop="content"
            label="评论内容"
          >
          </el-table-column>
          <el-table-column
            prop="eduModified"
            label="评论时间"
          >
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="评论用户"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="viewComment(scope.row.id)"
                type="primary"
                size="small">
                查看详情
              </el-button>
              <el-button
                @click.native.prevent="deleteComment(scope.row.id)"
                type="text"
                size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="commentDto.pageNum"
            :page-size="commentDto.pageSize"
            layout="total,  prev, pager, next, jumper"
            :total="commentDto.total">
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="3">
      </el-col>
    </el-row>
    <el-dialog
      title="评论详情"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <el-form ref="form" :model="comment" label-width="80px">
        <el-form-item>
          <div style="display: flex; align-items: center;">
            <img style="width: 50px;" :src="comment.avatar">
            <span style="font-size: larger; margin-left: 10px;">{{comment.nickname}}</span>
          </div>
        </el-form-item>
        <el-form-item label="课程标题">
<!--          <el-input v-model="comment.title"></el-input>-->
          <span style="font-size: larger; margin-left: 10px;">{{comment.title}}</span>
        </el-form-item>
        <el-form-item label="评论内容">
          <el-input  type="textarea" :rows="5" v-model="comment.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateComment">确 定 修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SideMenu from "../../components/SideMenu/SideMenu.vue";
import {delComment, getComment, getCommentList, updateComment} from "../../api/myComment";
import cookie from "js-cookie";

export default {
  components: {SideMenu},
  data() {
    return {
      commentDto: {
        memberId: '',
        pageNum: 1, // 当前页码
        pageSize: 3, // 每页显示数量
        pages: 0, // 总页数
        total: 0, // 总条目数
        content: '',
        orderBy: 'desc' // 默认按照评论时间逆序排列
      },
      commentList: [], // 存放评论列表数据
      comment: {},
      dialogVisible:false,
    };
  },
  methods: {
    getCommentList() {
      getCommentList(this.commentDto).then(
        res => {
          console.log(res);
          this.commentList = res.data.records
          this.commentDto.total = res.data.total
          this.commentDto.pageNum = res.data.current
          this.commentDto.pageSize = res.data.size
          this.commentDto.pages = res.data.pages
        }
      )
    },
    viewComment(id) {
      getComment(id).then(
        res => {
          this.comment = res.data
          console.log(this.comment)
          this.dialogVisible=true
        }
      )
    },
    deleteComment(id) {
      delComment(id).then(res => {
        if (res.code === 20000) {
          this.$message.success("删除成功")
          this.getCommentList()
        }
      })
    },
    updateComment() {
      updateComment(this.comment).then(
        res => {
          if (res.code === 20000) {
            this.$message.success("更新成功")
            this.getCommentList()
            this.dialogVisible=false
          }
        }
      )
    },
    handleSizeChange(val) {
      this.commentDto.pageSize = val;
      // 发送请求，更新列表数据
      this.getCommentList();
    },
    handleCurrentChange(val) {
      this.commentDto.pageNum = val;
      // 发送请求，更新列表数据
      this.getCommentList();
    },
  },
  created() {
    this.commentDto.memberId = cookie.get('uid')
    this.getCommentList()
  }
};
</script>
